<template>
    <div class="nav" v-if="showNav">
        <div v-for="(item,index) in list" :key="index" @click="go(index)">
            <img :src="item.properties.image">
            <div>{{item.properties.title}}</div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'homeNavs',
  data() {
    return {

    }
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    showNav() {
      return this.list.length
    }
  },
  methods: {
    go(index) {
      let data = this.list[index]
      if (data.type === 'recharge') {
        this.$router.push({
          path: 'recharge'
        })
      } else if (data.type === 'product_list') {
        this.$router.togo({
          path: 'product/list',
          query: { cate_id: this.list[index].properties.params.cate_id }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "~styles/mixin.less";
.nav{
    background: #fff;
    overflow:hidden;
    .pb(20);
    >div{
        .w(150);
        .h(140);
        float:left;
        text-align: center;
        img{
            .w(72);
            .h(72);
            .mt(20);
        }
        div{
            .mt(24);
        }
    }
}
</style>
